<template>
  <div class="monitoring-test">
    <el-card>
      <template #header>
        <span>监控功能测试</span>
      </template>
      
      <el-space direction="vertical" style="width: 100%">
        <!-- API测试按钮 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-button @click="testSummaryAPI" type="primary">
              测试监控摘要API
            </el-button>
          </el-col>
          <el-col :span="6">
            <el-button @click="testRealtimeAPI" type="success">
              测试实时数据API
            </el-button>
          </el-col>
          <el-col :span="6">
            <el-button @click="testHostsAPI" type="warning">
              测试主机列表API
            </el-button>
          </el-col>
          <el-col :span="6">
            <el-button @click="testWebSocket" type="danger">
              测试WebSocket连接
            </el-button>
          </el-col>
        </el-row>

        <!-- 测试结果显示 -->
        <el-card>
          <template #header>
            <span>测试结果</span>
          </template>
          
          <el-scrollbar height="400px">
            <div v-for="(log, index) in testLogs" :key="index" class="test-log">
              <el-tag 
                :type="log.type" 
                size="small" 
                style="margin-right: 10px;"
              >
                {{ log.timestamp }}
              </el-tag>
              <span>{{ log.message }}</span>
              <pre v-if="log.data" class="log-data">{{ JSON.stringify(log.data, null, 2) }}</pre>
            </div>
          </el-scrollbar>
        </el-card>

        <!-- 监控组件测试 -->
        <el-card>
          <template #header>
            <span>监控组件测试</span>
          </template>
          
          <el-button @click="showMonitoringDashboard = true" type="primary">
            打开监控仪表盘
          </el-button>
          
          <el-button @click="showSSHTerminal = true" type="success">
            打开SSH终端
          </el-button>
        </el-card>
      </el-space>
    </el-card>

    <!-- 监控仪表盘对话框 -->
    <el-dialog
      v-model="showMonitoringDashboard"
      title="监控仪表盘测试"
      width="90%"
      :close-on-click-modal="false"
    >
      <MonitoringDashboard />
    </el-dialog>

    <!-- SSH终端对话框 -->
    <el-dialog
      v-model="showSSHTerminal"
      title="SSH终端测试"
      width="90%"
      :close-on-click-modal="false"
    >
      <SSHTerminal />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import MonitoringDashboard from '@/components/monitoring/MonitoringDashboard.vue'
import SSHTerminal from '@/components/ssh/SSHTerminal.vue'
import { monitoringApi, cmdbApi, SSHWebSocket } from '@/api/monitoring'

// 响应式数据
const testLogs = ref([])
const showMonitoringDashboard = ref(false)
const showSSHTerminal = ref(false)

// 添加测试日志
const addLog = (message: string, type: string = 'info', data?: any) => {
  testLogs.value.push({
    timestamp: new Date().toLocaleTimeString(),
    message,
    type,
    data
  })
}

// 测试监控摘要API
const testSummaryAPI = async () => {
  addLog('开始测试监控摘要API...', 'info')
  
  try {
    const response = await monitoringApi.getSummary()
    addLog('监控摘要API测试成功', 'success', response.data)
    ElMessage.success('监控摘要API测试成功')
  } catch (error) {
    addLog(`监控摘要API测试失败: ${error.message}`, 'danger', error)
    ElMessage.error('监控摘要API测试失败')
  }
}

// 测试实时数据API
const testRealtimeAPI = async () => {
  addLog('开始测试实时数据API...', 'info')
  
  try {
    const response = await monitoringApi.getRealtimeMetrics()
    addLog('实时数据API测试成功', 'success', response.data)
    ElMessage.success('实时数据API测试成功')
  } catch (error) {
    addLog(`实时数据API测试失败: ${error.message}`, 'danger', error)
    ElMessage.error('实时数据API测试失败')
  }
}

// 测试主机列表API
const testHostsAPI = async () => {
  addLog('开始测试主机列表API...', 'info')
  
  try {
    const response = await cmdbApi.getHosts()
    addLog('主机列表API测试成功', 'success', response.data)
    ElMessage.success('主机列表API测试成功')
  } catch (error) {
    addLog(`主机列表API测试失败: ${error.message}`, 'danger', error)
    ElMessage.error('主机列表API测试失败')
  }
}

// 测试WebSocket连接
const testWebSocket = () => {
  addLog('开始测试WebSocket连接...', 'info')
  
  // 使用一个测试主机ID（如果没有真实主机，这会失败）
  const testHostId = 1
  const ws = new SSHWebSocket(testHostId)
  
  ws.connect({
    onOpen: () => {
      addLog('WebSocket连接成功', 'success')
      ElMessage.success('WebSocket连接成功')
      
      // 发送测试消息
      ws.send({ type: 'test', message: 'Hello WebSocket' })
      
      // 5秒后关闭连接
      setTimeout(() => {
        ws.close()
        addLog('WebSocket连接已关闭', 'info')
      }, 5000)
    },
    
    onMessage: (data) => {
      addLog('收到WebSocket消息', 'info', data)
    },
    
    onError: (error) => {
      addLog(`WebSocket连接错误: ${error}`, 'danger', error)
      ElMessage.error('WebSocket连接失败')
    },
    
    onClose: () => {
      addLog('WebSocket连接已断开', 'warning')
    }
  })
}

// 清空日志
const clearLogs = () => {
  testLogs.value = []
}
</script>

<style scoped>
.monitoring-test {
  padding: 20px;
}

.test-log {
  margin-bottom: 10px;
  padding: 10px;
  border-left: 3px solid #e0e0e0;
  background: #f9f9f9;
}

.log-data {
  margin-top: 10px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
  overflow-x: auto;
}
</style>
